an app to share curated trails
sidetrail.app
1import Link from "next/link";
2import { Suspense } from "react";
3import { ProfileTabs } from "./ProfileTabs";
4import { ProfileAvatar, ProfileAvatarShimmer } from "./ProfileAvatar";
5import { NewTrailButton } from "../../NewTrailButton";
6import { UserMenu } from "../../UserMenu";
7import "./ProfileShell.css";
8
9export async function ProfileShell({
10 children,
11 params,
12}: {
13 children: React.ReactNode;
14 params: Promise<{ handle: string }>;
15}) {
16 const { handle: rawHandle } = await params;
17 const handle = decodeURIComponent(rawHandle);
18
19 return (
20 <div className="ProfileShell">
21 <div className="ProfileShell-header">
22 <div className="ProfileShell-titleRow">
23 <Link href="/" className="ProfileShell-homeLink">
24 sidetrail
25 </Link>
26 <div className="ProfileShell-actions">
27 <NewTrailButton />
28 <UserMenu />
29 </div>
30 </div>
31 <div className="ProfileShell-userInfo">
32 <Suspense fallback={<ProfileAvatarShimmer />}>
33 <ProfileAvatar handle={handle} />
34 </Suspense>
35 <h1 className="ProfileShell-username">@{handle}</h1>
36 </div>
37 </div>
38 <div className="ProfileShell-content">
39 <ProfileTabs handle={handle} />
40 {children}
41 </div>
42 </div>
43 );
44}